<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!doctype html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Estore图书商城</title>

<link rel="stylesheet"
	href="http://localhost:8080/bookEstore/css/style.css" type="text/css"
	media="screen" />
<link rel="stylesheet"
	href="http://localhost:8080/bookEstore/css/demo.css" type="text/css"
	media="screen" />
<link rel="stylesheet"
	href="http://localhost:8080/bookEstore/css/substyle.css" type="text/css"
	media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.ie7.css" type="text/css" media="screen" /><![endif]-->

<script type="text/javascript"
	src="http://localhost:8080/bookEstore/js/script.js"></script>

<script type="text/javascript"
	src="http://localhost:8080/bookEstore/js/jquery.min.js"></script>
<script type="text/javascript">
var focus_width =512;
var focus_height = 340;
var picPath;
var linkUrl = "";
var swfPath = "http://localhost:8080/bookEstore/images/adImage.swf";
var sp = "|";
var banners = new Array("images/screen1.png", "images/screen2.png","images/screen3.png", "images/screen4.png", "images/screen5.png","images/screen6.png");
var links = new Array("#", "#", "#", "#", "#", "#");
for (var i = 0; i < banners.length; i++) {
	if (i == banners.length - 1) {
		sp = "";
	}
	picPath += banners[i] + sp;
	var index = picPath.indexOf("undefined");
	if (index != -1) {
		picPath = picPath.substr(index + 9, picPath.length);
	}
	linkUrl += links[i] + sp;
}

window.onload = function() {
	var usernamevalue = "${cookie.saveusername.value}"; //从cookie中获取saveusername值,得到的是utf-8码
	//alert(usernamevalue);
	document.getElementById("username").value = window.decodeURIComponent(usernamevalue, "utf-8");
	//通过decodeURIComponent这个函数完成utf-8解码操作.
}
	
$(document).ready(function() {
	var index = 0;
	more("findAll",index,16);
	newbook("findAll", 0, 10);
	checkType();
	function checkType() {
		if(GetQueryString("type")==null){
			$("#type").html("全部");
		}
	}
	$("#up").click(function() {
		if($("#up").text()=="上一页"){
			index = index - 16;
			more("findAll",index,16);
			checkType();
		}
	});
	$("#down").click(function() {
		if($("#down").text()=="下一页"){
			index = index + 16;
			more("findAll",index,16);
			checkType();
		}
	});
	$("#find").click(function() {
		index = 0;
		more("findAll",index,8);
	});
	function GetQueryString(name) {
	   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
	   var r = window.location.search.substr(1).match(reg);
	   if (r!=null) return unescape(r[2]); return null;
	}
	function more(method, start, length) {
		var search = GetQueryString("type");	
		$("#type").html(search);
		var key = document.getElementById("key").value;
		$.ajax({
			type : "post",
			url : "/bookEstore/product",
			data : {
				method : method,
				start : start,
				length : length,
				search : search,
				key : key 
			},
			timeout:25000,
			dataType : "json",
			success : function(result) {
				var item = '';
				if(result.length<16){
					$("#down").html("没有更多了");
				}else{
					$("#down").html("下一页");
				}
				if(index==0){
					$("#up").html("没有更多了");
				}else{
					$("#up").html("上一页");
				}
				
				$.each(result, function(i, data){ 
					item +=  '<figure style="float:left; margin-top:15px;">'+
                    '<img src="/bookEstore/'+data.imgurl+'" width="108" height="100">'+
                    '<figcaption>'+data.name+'</figcaption>'+
                    '<span><a href="${pageContext.request.contextPath}/product?method=findById&id='+data.id+'">速速抢购</a></span>'+
              	 	'</figure>';
               }); 
				$("#content").html(item);
			}
		});
	}
	
	function newbook(method, start, length) {
		$.ajax({
			type : "post",
			url : "/bookEstore/product",
			data : {
				method : method,
				start : start,
				length : length,
				search : '',
				key : ''
				
			},
			timeout:25000,
			dataType : "json",
			success : function(result) {
				var item = '';
				$.each(result, function(i, data){ 
					item += '<li><img src="images/star.png" height="22" width="24" />&nbsp;&nbsp;<a href="#">'+data.name+'</a></li>';
					}); 
				$("#newbook").html(item);
			}
		});
	}
});
</script>
</head>
<body>
	<div id="art-main">
		<p class="topbar">&nbsp;</p>
		<!-- art-sheet-->
		<div class="art-sheet" style="min-height:1550px;">
			<!-- art-header -->
			<div class="art-header">
				<div class="art-header-png"></div>
				<div class="estore">
					<h1 style="font-size:30px;margin:30px 0 10px 0;">Estore图书商城</h1> 
					<!-- art-blockcontent-body -->
					<div class="art-blockcontent-body">
						
							<form method="post" id="loginForm"
							action="${pageContext.request.contextPath}/user"><input
								type="hidden" name="method" value="login">
								<table style="margin-left:10px;">
									<tr>
										<td colspan="2"><font color='red' style="margin-top:-10px;">${requestScope["login.message"]}</font>
									</td>
								</tr>
									<tr>
										<td class="login">用户名：</td>
										<td><input type="text" value="" name="username"
											id="username" /><br /></td>
								</tr>
									<tr>
										<td class="login">密码：</td>
										<td><input type="password" value="" name="password"
											id="password" /></td>
								</tr>
									<tr class="rem">
										<td colspan="2">
										    <input type="checkbox" name="remember"
											value="on" />记住用户 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
											<input type="checkbox" name="autologin"
											value="on" />自动登陆</td>
								</tr>
									<tr>
										<td colspan="2"><input class="art-button" type="submit"
											name="loginbtn" value="登陆" style="margin-right:10px;"/><button class="art-button"><a
												href='${pageContext.request.contextPath}/regist.jsp' style="color:white;">注册</a></button>
									    </td>
									</tr>
							</table></form>
				</div> 
				<!-- art-blockcontent-body -->
			</div>
		</div> 
		<!-- art-header -->
		<!--leftside-->
			<aside id="leftside" style="min-height:1235px;">
			<!-- parto -->
				<div class="parto">
					<h1>图书类别</h1>
					<div>
						<ul>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=novel' >小说</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=cartoon' >童书</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=study' >学习考试</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=literature' >文学</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=music' >音乐</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=art' >艺术</a></li>
							<li><img src="images/plane.png" height="22" width="24" />&nbsp;&nbsp;<a
								href='${pageContext.request.contextPath}/productkinds.jsp?type=science' >科技</a></li>
					</ul>
				</div>
			</div>
			<!-- parto -->
			
	       <!-- parto -->
	       	<div class="parto" style="margin-top:10px;">
				<h1>最新图书</h1>
				<div>
					<ul id="newbook">
							
					</ul>
				</div>
			</div>
			<!-- parto -->
		</aside> 
		<!-- leftside-->
		
		
		<!-- main -->
		<div id="main" style="min-height:1380px;">
		  <nav class="art-nav">
			    <c:if test="${empty user }">
						<span style="position:absolute;top:10px;color:white;right:260px;">用户未登录</span>
			    </c:if>
			    <c:if test="${not empty user }">
						<span style="position:absolute;top:10px;color:white;right:265px;">当前用户:${user.username}</span>
						<span style="position:absolute;top:10px;color:white;right:210px;"><a
							style="color:white;" href='${pageContext.request.contextPath}/user?method=logout'>注销</a>
						</span>
				</c:if>
			   
		</nav>
		
		<!-- art-content-layout -->
			<div class="art-content-layout" style="margin-top:50px;">
					
	    <!-- art-post -->
		       <div class="art-post">
					   <div class="art-postcontent" style="float:left;">
						   <!-- article-content --> 
						   <script type="text/javascript" src="mutilpleFlash.js"></script> 
						   <!-- /article-content -->
				       </div>
			         <!-- aside-->
				 <aside>
			     <script type="text/javascript">
                     $(function(){
	                $(".left_nav dt").addClass("dt");
	                $(".left_nav dd").addClass("dd");
	                $(".search").focus(function(){
	           		    $(this).val(" ");
	           		 });
                 });
     
                 </script>			      
			      <div class="left_nav art-vmenu">
                     <dl>
                        <dt class="remove">导航菜单</dt>
                        <dd><a href="${pageContext.request.contextPath}/index.jsp">主页</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/addProduct.jsp">添加商品</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/showCart.jsp">查看购物车</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/order?method=search">查看订单</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/download">下载榜单</a></dd>
						<dd><a href="#">关于我们</a></dd>
					    <dd><a href="#">联系方式</a></dd>
                     </dl>
                     <input type="text" value="" maxlength="30" class="search" id="key"><button style="background:#87520E; color:white; padding:8px 4px 9px 5px;line-height:20px;width:75px;border:#87520E solid 1px;font-size:16px;" id="find">search</button>
                 </div>
				</aside>
						            
                    <!-- 中间部分 -->
					<div class="art-article">
						<h1 class="comm" id="type">新书上架</h1>
						<br/>
						<div class="marside" id="content" ></div>
						<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#ffffff SIZE=0>
	                    <div  style="float: none;">
							<button type="button"  id="up" style="float: left;background:#87520E;line-height:30px;color:white;border:0;padding:3px 7px;font-size:15px;cursor:pointer;">上一页</button>
							<button type="button"  id="down" style="float: right;background:#87520E;line-height:30px;color:white;border:0;padding:3px 7px;font-size:15px;cursor:pointer;">下一页</button>
						</div>
					</div>
					
					<div class="art-article" style="background:#87520E;padding:10px 0 10px 10px;margin-top:15px;">
					    <script type="text/javascript" src="http://localhost:8080/bookEstore/js/demo.js"></script>
					     <div id="left"> <a href="javascript:void(0);" class="js-prev" style="margin-left:5px;"><img  src="images/button_left.png" alt="Previous" /></a></div>
                          <ul id="images">
                              <li class="slide" role="1"><a href="http://www.zysd.cn/" class="small-img slide-img"><img onclick="lightbox()"  src="images/scroll1.png" title="Home made" /></a></li>
                              <li class="slide" role="2"><a href="http://b-k.com.cn/" class="small-img slide-img"><img  onclick="lightbox()"   src="images/scroll2.png" title="Chocolate" /></a>
                                    <div class="overlay"></div>
                              </li>
                              <li class="slide" role="3"><a href="http://shop.kongfz.com/" class="small-img slide-img"><img  onclick="lightbox()"   src="images/scroll3.png" title="Love birds" /></a>
                                    <div class="overlay"></div>
                              </li>
                              <li class="slide" role="3"><a href="http://www.winxuan.com/" class="small-img slide-img"><img  onclick="lightbox()"  src="images/scroll4.png" title="Love birds" /></a>
                                    <div class="overlay"></div>
                              </li>
                              <li class="slide" role="3"><a href="http://www.sdxjpc.com/main/" class="small-img slide-img"><img  onclick="lightbox()"   src="images/scroll1.png" title="Love birds" /></a>
                                    <div class="overlay"></div>
                              </li>
                        </ul>
                        <div id="right"> <a href="javascript:void(0);" class="js-next"><img  src="images/button_right.png" alt="Next" style="margin-left:-10px;"/></a> </div>
			        </div>
				</div>
				<!-- art-post -->
				</div>
				
			<!-- art-content-layout -->
			
			</div>
			<!-- main -->
		</div>
		<!-- art-sheet-->
		 <footer style="padding-bottom:20px;margin-top:20px;" id="footer">
        
            <div>&nbsp;</div>
            <p style="background:#87520E; height:40px;">&nbsp;</p>
        </footer>

   </div>


</body>
</html>
